<div class="AknMediaField <%- value && value.data && value.data.filePath ? 'has-file' : '' %>" >
    <% if (!value || !value.data || value.data.filePath === null) { %>
        <input class="AknMediaField-fileUploaderInput" id="<%- fieldId %>" type="file" data-locale="<%- locale %>" data-scope="<%- scope %>" <%- editMode === 'view' ? 'disabled' : '' %>/>
        <div class="AknMediaField-emptyContainer">
            <span title="upload icon" class="AknMediaField-uploadIcon"></span>
            <span><%- _.__('pim_common.media_upload')%></span>
        </div>
    <% } else { %>
        <div class="AknMediaField-preview preview">
            <% mediaThumbnailUrl = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'thumbnail_small') %>
            <% mediaPreviewUrl   = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'preview') %>
            <% mediaDownloadUrl  = mediaUrlGenerator.getMediaDownloadUrl(value.data.filePath) %>
            <% if ('pim_catalog_image' === attribute.type && null != mediaThumbnailUrl) { %>
                <div class="AknMediaField-thumb file"><img src="<%- mediaThumbnailUrl %>" class="AknMediaField-image"/></div>
            <% } else { %>
                <div class="AknMediaField-thumb file">
                    <span title="upload icon" class="AknMediaField-uploadIcon"></span>
                </div>
            <% } %>
            <div class="AknMediaField-info info">
                <div class="filename" title="<%- value.data.originalFilename %>"><%- value.data.originalFilename %></div>
                <div class="AknButtonList AknButtonList--centered actions">
                    <% if ('pim_catalog_image' === attribute.type && null != mediaPreviewUrl) { %>
                        <span class="AknButtonList-item AknIconButton AknIconButton--grey open-media"><i class="icon icon-eye-open"></i></span>
                    <% } %>
                    <a href="<%- mediaDownloadUrl %>" class="AknButtonList-item AknIconButton AknIconButton--grey download-file" download><i class="icon icon-cloud-download"></i></a>
                    <span class="AknButtonList-item AknIconButton AknIconButton--grey clear-field <%- editMode === 'view' ? 'AknIconButton--hide' : '' %>"><i class="icon icon-trash"></i></span>
                </div>
            </div>
        </div>
    <% } %>
    <div class="AknMediaField-progress AknProgress AknProgress--micro progress">
        <div class="AknProgress-bar bar"></div>
    </div>
</div>
